<div class="m-l nav navbar-nav m-t block" style="width:300px;" >  
  <span>用户管理 ></span>  
  <span>渠道商用户 ></span> 
  <span>列表</span>      
</div>
<div class="m-t-lg">
  <div class="wrapper-sm">
	<div class="panel panel-default">
		<div class="panel-body">
			<div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5">
				<div class="row">					
					<div class="col-md-6">
						<div class="input-group">
					      <input type="text" class="form-control" placeholder="手机号...">
					      <span class="input-group-btn">
					        <button class="btn btn-default" type="button">查询</button>
					      </span>
					    </div>
					</div> 
					<div class="col-md-6" style="text-align: right">
						<button class="btn btn-info pull-right" (click)="btype=1; myModal.show()">
							新增
						</button>
					</div>			
				</div>
			</div>
			<div class="table-responsive">
			<table class="table table-hover table-striped">
				<thead>
					<tr>
						
	   					<th>用户ID</th>	
	   					<th>姓名</th>	   					
	   					<th>手机号</th>	   					   					
	   					<th>身份证号</th>
	   					<th>开户银行</th>
	   					<th>银行账号</th>
	   					<th>单位名称</th>
	   					<th>注册日期</th>
	   					<th>操作</th>
	   					
					</tr>
				</thead>
				<tbody>
					<tr>						
	   					<td>5435345</td>
	   					<td>sssdssf</td>
	   					<td>12324355678</td>
	   					<td>123ferwer</td>
	   					<td>中行</td>
	   					<td>
	   						324234234236456
	   					</td>
	   					<td>上海幸云</td>
	   					<td>2017/6/17</td>	   					
	   					<td>
	   						<button class="btn btn-xs btn-info" (click)="btype=2;myModal.show()">编辑</button>   						
	   						<button class="btn btn-xs btn-success" (click)="btype=3;myModal.show()">设置分成比例</button>
	   						<button class="btn btn-xs btn-danger" (click)="btype=4;myModal.show()">禁用</button>
	   						<button class="btn btn-xs btn-danger" (click)="btype=5;myModal.show()">删除</button>
	   					</td>
					</tr>
				</tbody>
			</table>
			</div>
			<app-pagination [pageModel]="pageModel" (pageChanged)="getAll($event)"></app-pagination>
		</div>
	</div>
  </div>
</div>

<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
		  <div class="modal-header">
		    <h4 class="modal-title" *ngIf="btype==1">新增渠道商用户</h4>
		    <h4 class="modal-title" *ngIf="btype==2">编辑渠道商用户</h4>
		     <h4 class="modal-title" *ngIf="btype==3">设置分成比例</h4>
		    <h4 class="modal-title" *ngIf="btype==4">禁用</h4>
		    <h4 class="modal-title" *ngIf="btype==5">删除渠道商用户</h4>		    
		   <!--  <button class="close" aria-label="Close" (click)="closeModal()">
		      <span aria-hidden="true">&times;</span>
		    </button> -->
		  </div>
		  <div class="modal-body">
		    <form class="form-horizontal" *ngIf="btype==1||btype==2">
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">姓名</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="姓名" name="name" [(ngModel)]='name'  required="">
		          </div>
		          <div class="col-sm-2" style="color:red;margin-top: 10px;">
		            <p [hidden]="name">必填</p>
		          </div>
		        </div> 		       
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">手机号</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="手机号" name="phone" [(ngModel)]='phone'  required="">
		          </div>
		          <div class="col-sm-2" style="color:red;margin-top: 10px;">
		            <p [hidden]="phone">必填</p>
		          </div>
		        </div> 
		        <div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">身份证号</label>
		          <div class="col-sm-7">
		            <input type="text"  class="form-control" placeholder="手机号" name="IDnum" [(ngModel)]='IDnum'  required="">
		          </div>
		          <div class="col-sm-2" style="color:red;margin-top: 10px;">
		            <p [hidden]="IDnum">必填</p>
		          </div>
		        </div>                    
		        
		    </form>
		    <form class="form-horizontal" *ngIf="btype==3">
		    	<div class="form-group row" >
		          <label class="col-sm-3  control-label" style="text-align: right">分成比例</label>
		          <div class="col-sm-3">
		            <input type="text"  class="form-control">
		          </div>
		          <!-- <div class="col-sm-1" style="font-weight: bold;"> -->
		          	<label class="m-l-n-lg col-sm-1 control-label">:</label>
		          <!-- </div> -->
		          <div class="col-sm-3">
		            <input type="text"  class="form-control">
		          </div>
		          
		        </div>       
		    </form>
		    <div *ngIf="btype==4">
		    	<div style="background-color: #e5e5e5;padding: 10px;border-radius: 5px;">
		    		<h4>确定要禁用嘛？</h4>
		    	</div>
		    </div>
		    <div *ngIf="btype==5">
		    	<div style="background-color: #e5e5e5;padding: 10px;border-radius: 5px;">
		    		<h4>确定要删除该用户嘛？</h4>
		    	</div>
		    </div>
		  </div>
		  <div class="modal-footer">
		    <button class="btn btn-info confirm-btn" (click)="open()" [disabled]="!name||!phone||!IDnum" *ngIf="btype==1">保存</button>
		    <button class="btn btn-info confirm-btn" (click)="open()" [disabled]="!name||!phone||!IDnum" *ngIf="btype==2">保存</button>
		    <button class="btn btn-success confirm-btn" (click)="open()" *ngIf="btype==3">保存</button>
		    <button class="btn btn-danger confirm-btn" (click)="open()" *ngIf="btype==4">确定</button>
		    <button class="btn btn-danger confirm-btn" (click)="open()" *ngIf="btype==5">确定</button>
		    <button class="btn  confirm-btn " (click)="myModal.hide();cancel()">取消</button>
		  </div>
		</div>
     
    </div>
  </div>
</div>